
<template>
    <div class='crumb-container'>
        <el-row class="operate-box">
            <el-col>
                <div v-if="(pageLayer > 0)" class="grid-content">
                    <span class="shouye" @click="goToIndex">首页</span>
                    <span v-for="(item, i) in crumbList" :key="i" class="crumb-one" @click="goToBookData(item, i)"> <span class="crumb-jian"> ></span> {{ item.name }}</span>
                    <!-- <span v-if="crumbList.book_name" @click="goToBookData"> > {{ crumbList.book_name }}</span>
                    <span v-if="crumbList.data_name"> > {{ crumbList.data_name }}</span> -->
                </div>
                <div v-else class="grid-content">
                    <span class="shouye" @click="goToIndex">首页</span>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script setup lang='ts'>
import { CirclePlusFilled, DeleteFilled, Document, Rank, Search } from '@element-plus/icons-vue';
import { defineProps, getCurrentInstance, ref } from 'vue';
const { proxy } = getCurrentInstance() as any;
const props = defineProps({
    'pageLayer': {
        'type': Number,
        'required': true,
        'default': 0
    },
	// 面包屑的信息
    'crumbList': {
        'type': Object,
        'default': () => ({})
    }
})

const wd = ref("")

const goToIndex = () => {
    const params = {
        'layer': 0,
        'isFileDetail': false,
        // 'pageNumber': 1,
        // 'pageSize': 20
    };
    proxy.$router.replace({ query: params })
}

const goToBookData = (item, i) => {
    if (i < props.crumbList.length - 1) {
        const params = {
            'layer': parseInt(i) + 1,
            'isFileDetail': false,
        };
        proxy.$router.replace({ query: params })
    }
    
}


const created = () => {
    
};

created();
</script>
<style lang='scss' scoped>
.crumb-container {
    .operate-box {
        // line-height:50px;
        .grid-content {
            .crumb-one {
                font-weight: 500;
                color: #088D9E;
                &:last-child {
                    color: #94979E;
                }
                .crumb-jian {
                    color: #94979E;
                }
            }
            .shouye {
                color: #088D9E !important;
            }
        }
    }
}
</style>